<template>
	<view>
		<van-toast id="van-toast" />
		<!-- 商品详情信息 -->
		<view class="good-info">
			<text>{{ goodsObj.merchantName }} &gt;</text>
			<shop-good :gid="goodsObj.goodsId" :goodsimg="goodsObj.goodsImg" :goodsname="goodsObj.goodsName" :goodsprice="goodsObj.goodsPrice" :mid="orderDetailObj.merchantsid">
				<template v-slot:choice>
					<van-cell :title="orderDetailObj.choicename" />
				</template>
				<template v-slot:stepper>
					<text>x{{ orderDetailObj.count }}</text>
				</template>
			</shop-good>
		</view>
		<!-- 订单详情区域 -->
		<view class="order-detail">
			<view><text>收件人: </text><text style="font-size: 14px;color: gray;">{{ orderDetailObj.person }}</text></view>
			<view><text>联系方式: </text><text style="font-size: 14px;color: gray;">{{ orderDetailObj.tel }}</text></view>
			<view><text>收件人地址: </text><text style="font-size: 14px;color: gray;">{{ orderDetailObj.address.replaceAll(',', '') }}</text></view>
			<view><text>订单编号: </text><text style="font-size: 14px;color: gray;">{{ orderDetailObj.orderid }}</text></view>
			<view><text>下单时间: </text><text style="font-size: 14px;color: gray;">{{ orderDetailObj.time.split('.')[0].replace('T', ' ') }}</text></view>
			<view><text>物流状态: </text><text style="font-size: 14px;color: gray;">{{ orderDetailObj.state }}</text></view>
			<view><text>配送方式: </text><text style="font-size: 14px;color: gray;">{{ orderDetailObj.com ? orderDetailObj.com : '等待出库' }}</text></view>
			<view><text>商品单价: </text><text style="font-size: 14px;color: gray;">&yen;{{ orderDetailObj.price.toFixed(2) }}</text></view>
			<view><text>商品总额: </text><text style="font-size: 14px;color: gray;">&yen;{{ (orderDetailObj.price * orderDetailObj.count).toFixed(2) }}</text></view>
		</view>
		<!-- 分界线 -->
		<view class="divider"><van-icon name="like" /><text>你可能还喜欢</text></view>
		<!-- 推荐商品区域 -->
		<view class="recommend-area">
			<block v-for="item in recommendGoodsList" :key="item.goodsid">
				<index-good style="width: 46%;margin: 15rpx;border-radius: 5px;padding: 10px 0;background-color: white;" :item="item" @click.native="gotoGoodsDetail(item.goodsid, item.merchantsid)"></index-good>
			</block>
		</view>
	</view>
</template>

<script>
import Toast from '../../wxcomponents/vant-weapp/toast/toast'
	export default {
		onLoad(state) {
			this.goodsObj.goodsId = state.gid
			this.goodsObj.goodsImg = state.gimg
			this.goodsObj.goodsName = state.gname
			this.goodsObj.goodsPrice = state.gprice
			this.goodsObj.merchantName = state.mname
			this.getOrderDetail(state.orderid)
			this.getRecommendGoodsList()
		},
		onReachBottom() {
			!this.isFinish && this.page++
			this.getRecommendGoodsList()
		},
		data() {
			return {
				// 存储从订单列表页来的商品详情数据
				goodsObj: {
					goodsId: '',
					goodsImg: '',
					goodsName: '',
					goodsPrice: '',
					merchantName: ''
				},
				// 该订单的详细信息
				orderDetailObj: {},
				// 存储推荐商品的列表
				recommendGoodsList: [],
				page: 1,
				num: 5,
				isReachingBottomRequest: false,
				isFinish: false
			}
		},
		methods: {
			// 获取此订单详情
			async getOrderDetail(orderid) {
				const { data: res } = await uni.$http.get('/user/order/detail', { oid: orderid })
				if(res.meta.status !== 200) Toast.fail(res.meta.message)
				this.orderDetailObj = res.recordset[0]
				console.log(this.orderDetailObj)
			},
			// 获取推荐的商品信息
			async getRecommendGoodsList() {
				if(this.isReachingBottomRequest || this.isFinish) return
				this.isReachingBottomRequest = true
				const { data: res } = await uni.$http.get('/goods', { page: this.page, num: this.num })
				if(res.meta.status !== 200) return Toast.fail('获取推荐商品失败')
				this.recommendGoodsList = [...this.recommendGoodsList, ...res.recordset]
				if(res.recordset.length === 0) this.isFinish = true
				this.isReachingBottomRequest = false
			},
			// 前往商品详情页
			// 商品介绍页被点击时将会跳转至商品详情页
			gotoGoodsDetail(id, mid) {
				uni.navigateTo({
					url: `../../subpages/goodsdetail/goodsdetail?id=${ id }&mid=${ mid }`
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f2f2f2;
	}
	
	.good-info {
		background-color: white;
		margin-top: 20rpx;
		padding: 0 10rpx;
	}
	
	.good-info > text {
		font-size: 16px;
		font-weight: 600;
		height: 40px;
		line-height: 40px;
		padding-left: 15rpx;
	}
	
	.order-detail {
		background-color: white;
		margin-top: 20rpx;
		padding: 20rpx;
	}
	
	.order-detail > view {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 0;
	}
	
	.divider {
		height: 60px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.recommend-area {
		display: flex;
		flex-wrap: wrap;
		margin-top: 20rpx;
	}
	
	.van-cell {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
</style>
